从新建项目开始 ng new projectName --routing
打开 ../app/app-routing.module.ts
找到 const routes:Routes = [];
routes参数: path:url地址 ,component:组件
新建俩个页面试试
ng generate component page1
ng generate component page2
引入模块:
import { page1Component } from ...;
import { page2Component } from ...;
routes配置: //写在 app-route文件里
[
{path:'page1',component:Page1Component},
{path:'page2',component:Page2Component}
]
angular的路由使用方法和ui-router类似,只是写法不同。
1.ui-route之ui-sref :routerLink//链接
用法 :<a [routerLink]='['/page1']>page1</a>
:
2.ui-route之ui-view : router-outlet//展示div
用法:<router-outlet></router-outlet>
3.ui-route之state: Router.navigate()//路由跳转
用法:
constructor(private router: Router)
this.router.navigate(['/page2'])
4.ui-route之otherwise: path:'**'//路由跳转
用法 :{path:'**',component:errorComponent}
angular路由传递参数
1.queryParams
使用方法 :传入 <a [routerLink]="['/page1']" [queryParams]='{id:1}'>page1</a>;
接受:constructor(private routeInfo:ActivatedRoute);
cosole.log(this.routeInfo.snapshot.queryParams['id'])
2.链接
使用方法 :
routes预先设置需要传入的参数:path:'/page1/:id/:age'
传入 <a [routerLink]="['/page1',2,3]">page1</a>;
接受:constructor(private routeInfo:ActivatedRoute);
cosole.log(this.routeInfo.snapshot.params['age']);
3.配置
使用方法 :
routes预先设置需要传入的参数:{path:'page1',data:[{age:5}]}
接受:constructor(private routeInfo:ActivatedRoute);
cosole.log(this.routeInfo.snapshot.data[0]['age']);
参数快照snapshot与参数订阅subscribe区别与使用:
如果只是使用一次的话,其实使用snapshot就可以。
subscribe有一点类似于监听$watch。
用法 constructor(private routeInfo:ActivatedRoute);
this.routeInfo.params.subscribe((data)=>{console.log(data['age'])});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。